<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <h1>{{ msg }}</h1>
<!--  <h2>{{ heading }}</h2>-->
</div>

<!--
创建时：
1. data 的 property => 响应式系统
编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等

虚拟DOM
js创建了DOM => diff

生命周期钩子
app = ele.getElementById("app")
// beforeCreate()
h1 = ele.creatElement("h1")
h1.innerHTML = msg
// created()
// beforeMount()
app.append(h1)
// mounted()
// beforeUpdate()
msg = xxx
// updated()
-->
<script src="js/vue.js"></script>
<script>
  const app = new Vue({
    // el: "#app",
    data: {
      msg: "hello vue实例!",
    },
    beforeUpdate() {
      console.log("beforeUpdate")
    },
    mounted() {
      console.log("mounted")
    },
    beforeMount() {
      console.log("beforeMount")
    },
    updated() {
      console.log("updated")
    },
    beforeCreate() {
      console.log("beforeCreate")
    },
    created() {
      console.log("created")
      // this.heading = "后加的heading"
    }
  }).$mount("#app")
</script>
</body>
</html>
